<template>
  <el-container class="book-center">
    <bookNav :data="allCategory" @nav-change="getNav" />
    <el-main class="book-main">
      <div class="search">
        <el-input v-model="keyword" placeholder="搜索图书" clearable>
        </el-input>
        <a href="javascript:;" @click="randomBook">推荐图书</a>
      </div>
      <bookList :data="filterList" :nav="currentNav" />
    </el-main>
    <el-dialog title="" :visible.sync="rankListVisible" width="60%">
      <div class="rank-title">图书排行榜</div>
      <bookList :data="topBooks" :nav="''" isRank />
    </el-dialog>
  </el-container>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
import bookNav from './BookNav';
import bookList from './BookList';
import mixins from '@mixins';
import { randomNumber } from '../../../utils';
export default {
  mixins: [mixins.home],
  components: {
    bookNav,
    bookList
  },
  data () {
    return {
      books: [],
      currentNav: '',
      keyword: '',
      rankListVisible: false
    };
  },
  methods: {
    ...mapActions(['getAllCategory', 'getAllFile']),
    ...mapMutations(['setCurrentBook']),
    async fetchBook () {
      const { list } = await this.$api.getBookList({ size: 999 });
      list.forEach((item) => {
        item.lxInfo = this.getCategoryById(item.lx);
      });
      this.books = list;
    },
    randomBook () {
      const len = this.books.length;
      const idx = randomNumber(0, len);
      this.setCurrentBook(this.books[idx]);
      console.log('idx :', idx);
      this.$router.push({
        name: 'bookDetail',
        params: { id: this.books[idx].id }
      });
    },
    getNav (val) {
      this.currentNav = val;
    }
  },
  computed: {
    ...mapState(['allCategory']),
    ...mapGetters(['getCategoryById']),
    filterList () {
      if (!this.keyword) return this.books;
      return this.books.filter((book) => {
        const bookName = book.name?.toLowerCase();
        const keyword = this.keyword?.toLowerCase();
        return bookName?.indexOf(keyword) !== -1;
      });
    },
    topBooks () {
      const tBook = this.books.concat([]).splice(0, 9);
      return tBook;
    }
  },
  mounted () {
    this.getAllCategory();
    this.getAllFile();
    this.fetchBook();
  }
};
</script>

<style lang="less" scoped>
.el-main {
  padding-top: 0;
}

.b-recommend {
  display: flex;
  flex-direction: column;
  align-items: center;

  i {
    padding: 20px;
    background: #eba6130e;
    border: 1px solid #eba613;
    border-radius: 50%;
    font-size: 40px;
    margin: 20px 0;
    color: #eba613;
    transition: all 0.2s linear;

    &:hover {
      cursor: pointer;
      background-color: #eba613;
      color: #fff;
    }
  }

  span {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .desc {
    font-size: 14px;
    color: #666;
  }
}

.search {
  margin-bottom: 10px;
  display: flex;

  a {
    width: 200px;
    background-color: #eba7131c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eba613;
    margin-left: 10px;
    border: 1px solid #eba613;
    border-radius: 4px;

    &:hover {
      background-color: #eba613;
      color: #fff;
    }
  }

  /deep/ .el-input__inner {
    &:focus,
    &:hover {
      border-color: #eba613;
    }
  }
}

.rank-title {
  font-size: 24px;
  color: #eba613;
  line-height: 40px;
  text-align: center;
}

.book-center {
  background-color: #fff;
  border-radius: 10px;
}

.book-main {
  padding: 20px;
}
</style>
